<template>
    <div class="score full">
      <el-container class="full-width" style="height: 60px;background: white" direction="horizontal">
        <el-row class="full-width shadow-base container-border">
          <div class="left" style="width: 200px">
            <a href="#" style="vertical-align: middle;background-color: white;width: 200px;height: 60px;line-height: 60px" >
              <img src="../../../assets/images/brand.png" class="full-width" alt="考试星" style="padding:0 20px;box-sizing:border-box;vertical-align: middle">
            </a>
          </div>
          <div class="right container-border box-border" style="padding: 0 300px 0 200px;">
          </div>
          <div class="addition">
            {{$store.state.user.user.email}}
          </div>
        </el-row>
      </el-container>
      <img src="https://s4.kaoshixing.com/static/exam/images/competition/p_img_decorate2.png" class="back-block-left"  alt="">
      <img src="https://s5.kaoshixing.com/static/exam/images/competition/p_img_decorate1.png" alt="" class="back-block-right" />
      <el-card class="score-content">
        <i class="el-icon-s-custom text-info" style="font-size: 60px;" />
        <el-row>
          <el-col>
            <h1 style="font-size: 40px">xxc</h1>
          </el-col>
        </el-row>
        <el-row>
          <h2 style="font-size: 35px;color: #409EFF">{{$route.params.score}}分</h2>
        </el-row>
        <el-row>
          <el-col>
            谢谢您的作答!
          </el-col>
        </el-row>
        <el-row>
          <el-col>棒棒哒!<i class="fa fa-thumbs-up text-brand"/></el-col>
        </el-row>
      </el-card>
    </div>
</template>

<script>
export default {}
</script>

<style scoped lang="less">
  @import url(../../../assets/css/common);
  .score {
      background: -webkit-linear-gradient(left, #268ffb, #4bcafd);
    .back-block-left {
      width: 180px;
      position: absolute;
      bottom: 30px;
      left: 0;
    }
    .back-block-right {
      width: 180px;
      position: absolute;
      top: 90px;
      right: 0;
    }
    .score-content {
      width: 600px;
      height: 400px;
      margin: 120px auto 0;
      .el-row:nth-child(1) {
        margin: 10px 0 40px 0;
      }
      .el-row {
        margin: 20px;
      }
    }
  }

  .addition{
    width: 300px;
    font-size: 20px;
    line-height: 60px;
    float: right;
    text-align: center;
    position: relative;
    z-index: 100;
  }
  .addition:hover{
    color: @brand;
    cursor: pointer;
  }
</style>
